<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2024-05-07 14:00:34
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2024-05-08 02:25:48
 * @FilePath: \greencity-ui\src\components\Map\TdtSearch.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by zhangduo, All Rights Reserved. 
-->
<template>
  <div class="search">
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入要搜索的地名"
      :trigger-on-focus="false"
      @select="handleSelect"
      clearable
      @clear="clear"
    ></el-autocomplete>
  </div>
</template>

<script>
import axios from "axios";
import Graphic from "@arcgis/core/Graphic";
import Color from "@arcgis/core/Color.js";
import Font from "@arcgis/core/symbols/Font.js";
import TextSymbol from "@arcgis/core/symbols/TextSymbol.js";
export default {
  props: {
    mapview: { default: () => {} },
  },
  data() {
    return {
      userAddress: undefined,
      state1: "",
      state2: "",
    };
  },
  mounted() {},
  methods: {
    querySearch(queryString, cb) {
      let _self = this;
      //地理编码查询
      let addresServer = window.mapConfig.tdtPoiUrl.replace(
        "skeyword",
        queryString
      );
      axios
        .get(addresServer)
        .then((res) => {
          console.log(res);
          if (res.status == 200 && res.data.count != 0) {
            _self.userAddress = res.data.pois.map((poi) => {
              return { value: poi.name, lonlat: poi.lonlat };
            });
            console.log(_self.userAddress);
          } else _self.userAddress = [{ value: "暂无信息" }];
          // 调用 callback 返回建议列表的数据
          cb(_self.userAddress);
        })
        .catch((err) => {
          _self.userAddress = [{ value: err }];
          cb(_self.userAddress);
          console.log(err);
        });
    },
    handleSelect(item) {
      if (item.lonlat == undefined) return;
      console.log(item);
      this.mapview.graphics?.removeAll();
      const point = {
        type: "point", // autocasts as new Point()
        x: item.lonlat.split(",")[0],
        y: item.lonlat.split(",")[1],
      };
      const markerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 2,
        },
      };
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol,
      });
      //创建文本标记 设置文本内容、颜色、偏移量、字体
      const textSymbol = new TextSymbol({
        angle: 0,
        backgroundColor: new Color([255, 255, 255, 0]),
        borderLineColor: new Color([255, 255, 255, 0]),
        borderLineSize: undefined,
        color: new Color([255, 0, 0, 1]),
        font: new Font({
          decoration: "none",
          family: "Arial Unicode MS",
          size: 16,
          style: "normal",
        }),
        haloColor: new Color([255, 255, 255, 1]),
        haloSize: 1,
        horizontalAlignment: "center",
        kerning: false,
        lineWidth: 192,
        rotated: false,
        text: item.value,
        verticalAlignment: "baseline",
        xoffset: 0,
        yoffset: 15,
      });
      // Create a graphic and add the geometry and symbol to it
      const textGraphic = new Graphic({
        geometry: point,
        symbol: textSymbol,
      });
      this.mapview.graphics.add(pointGraphic);
      this.mapview.graphics.add(textGraphic);
      this.mapview.goTo({
        target: pointGraphic,
        zoom: 16,
      });
    },
    // 清除poi临时图形
    clear() {
      this.mapview.graphics?.removeAll();
    },
  },
};
</script>

<style lang="scss" scoped></style>
